<template>
  <button
    @click="onToggle"
    class="h-switch"
    :class="classes"
    :disabled="disabled"
  >
    <span></span>
  </button>
</template>

<script lang="ts">
import { computed } from 'vue'
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'normal',
    },
  },
  setup(props, context) {
    const onToggle = () => {
      // vue2 this.$eimt
      console.log(1)
      context.emit('update:value', !props.value)
    }

    const classes = computed(() => {
      return {
        [`h-checked`]: props.value,
        [`h-size-${props.size}`]: props.size,
      }
    })
    return { onToggle, classes }
  },
}
</script>

<style lang="scss" scoped>
$h: 20px;
$h2: $h - 2px;
.h-switch {
  height: $h;
  width: $h * 2;
  border: none;
  background: #bfbfbf;
  border-radius: $h/2;
  position: relative;
  cursor: pointer;
  & + & {
    margin-left: 10px;
  }
  &[disabled] {
    border-color: #ececec;
    background-color: #ececec;
    cursor: not-allowed;
  }
  > span {
    position: absolute;
    top: 2px;
    left: 2px;
    height: $h2 - 2;
    width: $h2 - 2;
    background: white;
    border-radius: $h2 / 2;
    transition: all 250ms;
  }
  &.h-checked {
    background: #1890ff;
    > span {
      left: calc(100% - #{$h2 - 2} - 2px);
    }
  }

  &:focus {
    outline: none;
  }
  &:active {
    > span {
      width: $h2 + 4px;
    }
  }
  &.h-checked:active {
    > span {
      width: $h2 + 4px;
      margin-left: -6px;
    }
  }
}
.h-size-big {
  height: $h + 4;
  width: $h * 2 + 8;
  border-radius: $h/2 + 2;
  > span {
    height: $h2 + 2;
    width: $h2 + 2;
  }
  &.h-checked {
    background: #1890ff;
    > span {
      border-radius: $h2 / 2;
      left: calc(100% - #{$h2} - 4px);
    }
  }
  &:active {
    > span {
      width: $h2 + 6px;
    }
  }
  &.h-checked:active {
    > span {
      width: $h2 + 6px;
      margin-left: -4px;
    }
  }
}
.h-size-small {
  height: $h - 4;
  width: $h * 2 - 8;
  border-radius: $h/2;
  > span {
    top: 1px;
    height: $h2 - 4;
    width: $h2 - 4;
  }
  &.h-checked {
    background: #1890ff;
    > span {
      border-radius: $h2 / 2;
      left: calc(100% - #{$h2} + 2px);
    }
  }
  &:active {
    > span {
      width: $h2 + 2px;
    }
  }
  &.h-checked:active {
    > span {
      width: $h2 + 2px;
      margin-left: -6px;
    }
  }
}
</style>

